<template>
    <div class="cretae-container">
        <div class="top">
            <span>
                用户创建
            </span>
            <el-button type="default" @click="back">返回</el-button>
        </div>
        <el-form :model="form" label-width="120px" :rules="rules">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" />
            </el-form-item>
            <el-form-item label="手机号码" >
                <el-input v-model="form.mobile" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="头像">
                <Upload @uploadEvt="getAvatar" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即创建</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>


<script setup>
import Upload from '@/components/common/Upload.vue'
import { requestIns } from '@/utils/request'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const form = reactive({
    username: '',
    password: '',
    mobile: '',
    avatar: ''
})
const getAvatar = (avatar) => {
    form.avatar = avatar
}
const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 12, message: '长度在 6 到 12 个' }
    ]
})


const onSubmit = async () => {
    const res = await requestIns.request('/user/create', 'post', form)
    if (res.state == 201) {
        ElMessage.success(res.msg)
    } else {
        ElMessage.error(res.msg)
    }
    reset()
}
const reset = () => {
    form.username = ''
    form.password = ''
    form.mobile = ''
    form.avatar = ''
}
const back = () => {
    router.push('/user')
}
</script>

<style scoped>
.cretae-container {
    background-color: #fff;

    .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
    }

    .el-form {
        box-sizing: border-box;
        padding: 20px;
    }
}
</style>